<template>
    <div class="SHZR_wraper">
        <div class="wrap">
            <div class="header">
                <div class="header_title">{{ $t('p6.tab4.title') }}</div>
                <div class="icon"></div>
            </div>

            <div class="desc">
                {{ $t('p6.tab4.desc') }}
            </div>

            <div class="content_wrap">

                <div class="item">
                    <div class="title">{{ $t('p6.tab4.item1.title') }}</div>
                    <div class="content">{{ $t('p6.tab4.item1.desc') }}</div>
                </div>
                <div class="item">
                    <div class="title">{{ $t('p6.tab4.item2.title') }}</div>
                    <div class="content">{{ $t('p6.tab4.item2.desc') }}</div>
                </div>
                <div class="item">
                    <div class="title">{{ $t('p6.tab4.item3.title') }}</div>
                    <div class="content">{{ $t('p6.tab4.item3.desc') }}</div>
                </div>
                <div class="item">
                    <div class="title">{{ $t('p6.tab4.item4.title') }}</div>
                    <div class="content">{{ $t('p6.tab4.item4.desc') }}</div>
                </div>
                <div class="item">
                    <div class="title">{{ $t('p6.tab4.item5.title') }}</div>
                    <div class="content">{{ $t('p6.tab4.item5.desc') }}</div>
                </div>
                <div class="item">
                    <div class="title">{{ $t('p6.tab4.item6.title') }}</div>
                    <div class="content">{{ $t('p6.tab4.item6.desc') }}</div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import { getStore } from '@/libs'
export default {
    name: "index",
    components: {

    },
    data() {
        return {
            params: null,
        }
    },

    created() {
        this.params = this.$route.query
    },
    methods: {

    }
};
</script>


<style lang="scss" scope>
.SHZR_wraper{
    color: #333333;
    .wrap{
        .header{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 40px;
            .header_title{
                font-size: 28px;
                font-weight: bold;
            }
            .icon{
                margin-top: 5px;
                display: block;
                width: 35px;
                height: 5px;
                background-color: #98000A;
                border-top: 2px solid #FCA400;
            }
        }

        .desc{
            display: flex;
            justify-content: center;
            margin-top: 40px;
            padding: 0 20px;
        }
        .content_wrap{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            margin: 50px 0;

            .item{
                margin-bottom: 30px;
                width: 320px;
                text-align: center;
                margin: 10px;
                .title{
                    font-weight: bold;
                    background: #F1E6E6;
                    color: #98000A;
                    padding: 20px 0;
                }

                .content{
                    text-align: left;
                    padding: 20px;
                    background: #F1F3F3;
                    height: 250px;
                }

            }
        }
    }
}
.ml{
    margin-left: 60px;
}
</style>
